<script setup lang="ts">
import { PAGING } from '@/constant'

withDefaults(
  defineProps<{
    pageNum: number
    pageSize: number
    total: number
    pageSizes?: number[]
  }>(),
  {
    pageNum: 1,
    pageSize: 20,
    total: 0,
    pageSizes() {
      return PAGING.PAGE_SIZES
    },
  },
)
const emits = defineEmits<{
  (e: 'update:pageNum', pageNum: number): void
  (e: 'update:pageSize', pageSize: number): void
}>()

function updateCurrentPage(currentPage: number) {
  emits('update:pageNum', currentPage)
}
function updatePageSize(pageSize: number) {
  emits('update:pageSize', pageSize)
}
</script>

<template>
  <ElPagination
    class="flex-incompressible margin-top-sm pagination"
    layout="total, sizes, prev, pager, next, jumper"
    :current-page="pageNum"
    :page-size="pageSize"
    :page-sizes="pageSizes"
    :total="total"
    background
    hide-on-single-page
    v-bind="$attrs"
    @update:current-page="updateCurrentPage"
    @update:page-size="updatePageSize"
  />
</template>
